<template>
  <div>
    <el-form
      :model="formData"
      inline
      style="display: flex;justify-content: flex-end;margin-top: 10px;"
    >
      <el-form-item prop="goodsSn">
        <el-input v-model="formData.goodsSn" placeholder="请输入商品编号"></el-input>
      </el-form-item>
      <el-form-item prop="name">
        <el-input v-model="formData.name" placeholder="请输入商品名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="search" type="primary">查找</el-button>
        <el-button @click="addGoods" type="primary">添加</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="tableLoading" :data="tableData" border>
      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="宣传画廊">
              <img
                v-for="(item, index) in scope.row.gallery"
                :key="index"
                :src="item"
                alt=""
                style="width: 100px;height: 100px;">
            </el-form-item>
            <el-form-item label="商品介绍">
              <span>{{ scope.row.brief }}</span>
            </el-form-item>
            <el-form-item label="商品单位">
              <span>{{ scope.row.unit }}</span>
            </el-form-item>
            <el-form-item label="关键字">
              <span>{{ scope.row.keywords }}</span>
            </el-form-item>
            <el-form-item label="类目ID">
              <span>{{ scope.row.categoryId }}</span>
            </el-form-item>
            <el-form-item label="品牌商ID">
              <span>{{ scope.row.brandId }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>

      <el-table-column align="center" label="商品编号" prop="goodsSn"></el-table-column>
      <el-table-column align="center" label="名称" prop="name"></el-table-column>
      <el-table-column align="center" label="图片" prop="picUrl">
        <template slot-scope="scope">
          <img :src="scope.row['picUrl']" style="width:100px" alt="">
        </template>
      </el-table-column>
      <el-table-column align="center" label="分享图" prop="shareUrl"></el-table-column>
      <el-table-column align="center" label="详情">
        <template slot-scope="scope">
          <el-button size="mini" @click="seeDetail(scope.row)" type="primary">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" label="专柜价格" prop="counterPrice"></el-table-column>
      <el-table-column align="center" label="当前价格" prop="retailPrice"></el-table-column>
      <el-table-column align="center" label="是否新品" prop="isNew">
        <template slot-scope="scope">
          <el-tag>{{scope.row['isNew'] | filterTableItem(isNewOptions)}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="是否热品" prop="isHot">
        <template slot-scope="scope">
          <el-tag>{{scope.row['isHot'] | filterTableItem(isHotOptions)}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="是否在售" prop="isOnSale">
        <template slot-scope="scope">
          <el-tag>{{scope.row['isOnSale'] | filterTableItem(isOnSaleOptions)}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="200">
        <template slot-scope="scope">
          <el-button size="mini" @click="editGoods(scope.row)" type="primary">编辑</el-button>
          <el-button size="mini" @click="deleteData(scope.row)" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.page"
      :page-sizes="[10, 20, 30, 50, 100]"
      :page-size="pageInfo.limit"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total">
    </el-pagination>

    <el-dialog
      :visible.sync="dialogVisible"
      :title="dialogTitle"
      width="500"
    >

      <div v-html="currentCopyRow.detail"></div>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'shopList',
  componentTitle: '商品列表',
  data () {
    return {
      dialogTreeVisible: false,
      dialogTreeTitle: '授权',
      treeData: [],
      tableLoading: false,
      dialogVisible: false,
      dialogTitle: '创建',
      dialogType: 'add',
      dialogFormData: {
        name: '',
        desc: ''
      },
      pageInfo: {
        page: 1,
        limit: 10,
        total: 0
      },
      formData: {
        goodsSn: '',
        name: ''
      },
      currentCopyRow: {},
      tableData: [],
      isNewOptions: [
        {label: '新品', value: true},
        {label: '非新品', value: false}
      ],
      isHotOptions: [
        {label: '普通', value: false},
        {label: '热卖', value: true}
      ],
      isOnSaleOptions: [
        {label: '在售', value: true},
        {label: '未售', value: false}
      ]
    }
  },
  filters: {
    filterTableItem (value, options) {
      let index = options.findIndex(item => {
        return item.value === value
      })

      if (index < 0) {
        return '---'
      } else {
        return options[index].label
      }
    }
  },
  mounted () {
    this.search()
  },
  methods: {
    seeDetail (row) {
      this.dialogVisible = true
      this.currentCopyRow = Object.assign({}, row)
    },
    addGoods () {
      this.$router.push({
        path: '/shoppingManage/shopHit'
      })
    },
    editGoods (row) {
      this.$router.push({
        path: '/shoppingManage/shopHit',
        query: {
          id: row.id
        }
      })
    },
    openDialog (title, type, row) {
      this.dialogVisible = true
      this.dialogType = type
      this.dialogTitle = title

      if (type === 'edit') {
        this.$nextTick(() => {
          this.dialogFormData = Object.assign({}, row)
        })
      }
    },
    confirm () {
      this.$refs.dialogForm.validate(valid => {
        if (valid) {
          if (this.dialogType === 'add') {
            this.addData()
          } else if (this.dialogType === 'edit') {
            this.editData()
          }
        } else {
          return false
        }
      })
    },
    cancel () {
      this.$refs.dialogForm.resetFields()
      this.dialogVisible = false
    },
    deleteData (row) {
      this.$confirm('此操作将删除该问题, 是否继续?').then(() => {
        axios({
          url: 'http://192.168.200.251:8888/admin/goods/delete',
          method: 'post',
          data: row,
          headers: {
            'Shopping-Admin-Token': sessionStorage.getItem('Shopping-Admin-Token')
          }
        }).then(res => {
          this.$notify.success({title: '删除成功'})
  
          this.search()
        })
      })
    },
    search () {
      this.tableLoading = true

      axios({
        url: 'http://192.168.200.251:8888/admin/goods/list',
        method: 'get',
        params: {
          page: this.pageInfo.page,
          limit: this.pageInfo.limit,
          ...this.formData
        },
        headers: {
          'Shopping-Admin-Token': sessionStorage.getItem('Shopping-Admin-Token')
        }
      }).then(res => {
        this.tableLoading = false
        this.tableData = res.data.data.list

        this.pageInfo.total = res.data.data.total
        console.log(res)
      })
    },
    // 每页多少条切换
    handleSizeChange (value) {
      this.pageInfo.limit = value

      this.search()
    },
    // 当前页码的切换
    handleCurrentChange (value) {
      this.pageInfo.page = value

      this.search()
    }
  }
}
</script>

<style lang="scss" scoped>
.demo-table-expand {
  display: flex;
  flex-direction: column;
  padding-left: 50px;

  >div {
    margin-bottom: 0;
  }
}
</style>
